<template>
  <div>
    <div class="big">
      <div class="top-6"></div>
      <div class="bigdiv">
       
       <!-- 首页轮播图图片 -->
    <div class="showImg">
      <!-- //轮播图片 -->
      <img
        @mouseover="changeInterval(true)"
        @mouseleave="changeInterval(false)"
        v-for="item in imgArr"
        :key="item.id"
        :src="item.url"
        alt="暂无图片"
        v-show="item.id === currentIndex"
      />
      <!-- //左侧按钮 -->
       <div @click="clickIcon('up')" class="iconDiv icon-left">
        <i class="el-icon-caret-left"></i>
      </div> 
      <!-- //右侧按钮 -->
       <div @click="clickIcon('down')" class="iconDiv icon-right">
        <i class="el-icon-caret-right"></i>
      </div> 
      <!-- //控制圆点 -->
      <div class="banner-circle">
        <ul>
          <li
            @click="changeImg(item.id)"
            v-for="item in imgArr"
            :key="item.id"
            :class="item.id === currentIndex ? 'active' : ''"
          ></li>
        </ul>
      </div>
    </div>
        <!-- 新闻媒体报道 -->
        <div class="div_media">
          <div class="madea_title">
            <div class="madea_title1">
              <div>
                <p class="title_p1"><span>媒体报道</span></p>
                <!-- 媒体报道 -->
              </div>
            </div>
            <!-- 报道内容 -->
            <div class="madea_title2" v-for="list in list" :key="list.id">
              <div class="madea_content">
                <div class="title_img1">
                  <img
                    :src="list.mediaImg"
                    width="100%"
                    height="100%"
                  />
                </div>
                <div class="title_big">
                  <div class="title_left">
                    <p>
                      <span class="title_size_20"
                        ><a href="" class="title_a" 
                          >{{list.mediaTitle}}</a
                        ></span
                      >
                    </p>
                  </div>
                  <div class="title_left">
                    <p>
                      <span class="title_size_16"
                        >{{ list.mediaInfo }}</span
                      >
                    </p>
                  </div>
                  <div class="title_left">
                    <img class="img_sty" src="../assets/u3815.png" />
                    <span class="title_size_16">{{list.mediaDate}}</span>
                    &nbsp;
                    <img src="../assets/u3817.png" />
                    <span class="title_size_16">{{list.mediaVisitCount}}</span> &nbsp;
                    <img src="../assets/u3818.png" />
                    <span class="title_size_16">{{ list.mediaGoodCount}}</span> &nbsp;
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <Bottom/>
    
  </div>
</template>

<script>
import axios from 'axios'
import Bottom from "./Bottom.vue";
export default {
  components: {
    Bottom,
  },
  data() {
    return {
      
      list:[
      ],
currentIndex: 0, //当前所在图片下标
      timer: 0, //定时轮询
      imgArr: [
        {
          id: 0,
          url: "www5.jpg",
        },
        {
          id: 1,
          url: "www6.jpg",
        },
        {
          id: 2,
          url: "www7.jpg",
        },
        {
          id: 3,
          url: "www8.jpg",
        },
      ],
    };
  },
  methods: {
    wangdai(e) {
      window.location.href = "https://www.p2peye.com/";
    },
    jinrong(e) {
      window.location.href = "http://www.cfca.com.cn/";
    },
    yinlian(e) {
      window.location.href = "http://cn.unionpay.com/";
    },
    register() {
      alert("注册");
    },
    login() {
      alert("登录");
    },

    invest() {
      alert("投资");
    },

    //开启定时器
    startInterval() {
      // 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.currentIndex++;
        if (this.currentIndex > this.imgArr.length - 1) {
          this.currentIndex = 0;
        }
      }, 2000);
    },
    // 点击左右箭头
    clickIcon(val) {
      if (val === "down") {
        this.currentIndex++;
        if (this.currentIndex === this.imgArr.length) {
          this.currentIndex = 0;
        }
      } else {
        /* 第一种写法
					this.currentIndex--;
					if(this.currentIndex < 0){
						this.currentIndex = this.imgArr.length-1;
					} */
        // 第二种写法
        if (this.currentIndex === 0) {
          this.currentIndex = this.imgArr.length;
        }
        this.currentIndex--;
      }
    },
    // 点击控制圆点
    changeImg(index) {
      this.currentIndex = index;
    },
    //鼠标移入移出控制
    changeInterval(val) {
      if (val) {
        clearInterval(this.timer);
      } else {
        this.startInterval();
      }
    },

    initialize() {
      axios({
        url: "/api/invest/getMediaList",
      }).then((res) => {
        console.log(res.data.data);
        this.list=res.data.data;
      });
    },
  },
  //进入页面后启动定时轮询
  mounted() {
    this.startInterval();
    this.initialize();
  },

};
</script>

<style scoped>
.top-6{
  width: 100%;
  float: left;
  height: 50px;
}
.img_dw {
  height: 5000px;
  /* position: absolute; */
  left: 1370px;
  position: fixed;
  /*left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。*/

  top: 350px;
}
.asd {
  float: left;
  width: 100%;
  height: 235px;
  background-color: #ffffff;
}
.div_bg_blk {
  float: left;
  width: 100%;
  height: 90px;
  background-color: #414141;
}
.big {
  float: left;
  width: 100%;
  height: 2400px;
  background-color: #f6f6f6;
}
.madea_title2 :hover {
  color: #099af2;
}
.title_left {
  margin-top: 10px;
}
.title_size_16 {
  font-size: 16px;
  font-weight: 540;
  border-width: 0px;
  color: #999999;
  margin-top: 20px;
  margin-bottom: 20px;
}
.title_size_20 {
  font-size: 20px;
  font-weight: 540;
  border-width: 0px;
}
.title_a {
  color: #000000;
}
.title_big {
  float: left;
  width: 76%;
  height: 136px;
  /* background-color: yellow; */
  margin-left: 19.5px;
  /* padding-left:20px ; */
}
.title_img1 {
  float: left;
  width: 220px;
  height: 136px;
  /* background-color: red; */
}

.madea_content {
  width: 100%;
  height: 136px;
  /* background-color: rebeccapurple; */
  margin-top: 20px;
  margin-bottom: 20px;
}
.title_p1 {
  /* margin:20px 0 ; */
  padding: 20px 0 0 0;
  font-size: 25px;
}
.madea_title2 {
  width: 95%;
  height: 160px;
  background-color: #fefefe;
  border-bottom: 1px solid #eeeeee;
  margin: 0 auto;
}

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  /* color: white; */
}

li {
  list-style: none;
}

.madea_title1 {
  width: 95%;
  height: 60px;
  background-color: #fefefe;
  border-bottom: 1px solid #eeeeee;
  margin: 0 auto;
}
.madea_title {
  width: 100%;
  height: 60px;
  background-color: #fefefe;
}
.div_media {
  float: left;
  width: 100%;
  height: 1900px;
  background-color: #ffffff;
  margin: 0 auto;
  margin-top: 20px;
}
.bigdiv {
  width: 75%;
  height: 2000px;
  background-color: #f6f6f6;
  margin: 0 auto;
  margin-top: 10px;
}

/* 轮播图 */

.lilv {
  margin-top: 20px;
}
* {
  padding: 0;
  margin: 0;
}
/* 清除li前面的圆点 */
li {
  list-style-type: none;
}
.showImg {
  position: relative;
  width: 100%;
  height: 420px;
  margin: 0 auto;
  overflow: hidden;
}
/* 轮播图片 */
.showImg img {
  width: 100%;
  height: 100%;
}

/* 箭头图标 */
.iconDiv {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 1px solid #666;
  border-radius: 15px;
  background-color: rgba(125, 125, 125, 0.2);
  line-height: 30px;
  text-align: center;
  font-size: 25px;
  cursor: pointer;
}
.iconDiv:hover {
  background-color: white;
}
.icon-left {
  left: 10px;
}
.icon-right {
  right: 10px;
}

/* 控制圆点 */
.banner-circle {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20px;
}
.banner-circle ul {
  margin: 0 670px;
  height: 100%;
  text-align: right;
}
.banner-circle ul li {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 5px;
  border-radius: 7px;
  background-color: rgba(125, 125, 125, 0.8);
  cursor: pointer;
}
.active {
  background-color: black !important;
}

</style>